<template>
<transition name="fade">
    <div :class="!isMenuControl ? 'lse_data_view' : ''" id="lse_data_view" v-if="flag" style="height:100%">
      <Row style="height:100%">
        <Col style="height:100%" :xs="{span:24}" :sm="{span:22,offset:1}" :md="{span:20,offset:2}">
        <el-scrollbar style="height:100%;">
            <div style="padding:10px">
            <h2 style="text-align:left">LSE API 数据格式化</h2>
            <!-- 内容编辑区 -->
            <Divider orientation="left">内容编辑（Content editing）</Divider>
            <transition name="el-zoom-in-top">
            <div v-if="editFlag">
                <el-button size="mini" style="width:100%" @click="editFlag = !editFlag">
                    <i class="el-icon-arrow-up" v-if="editFlag"></i>
                    <i class="el-icon-arrow-down" v-else></i>
                    {{editFlag ? '收起' : '展开编辑'}}</el-button>
                <el-input @change="dataChangeView"
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    placeholder="请输入内容"
                    v-model="data">
                    </el-input>
            </div>
            </transition>
            <div>
                <el-button size="mini" :style="{
                    width: formattingType === 'JSON' ? '30%' : '100%'
                }" @click="editFlag = !editFlag">
                    <i class="el-icon-arrow-up" v-if="editFlag"></i>
                    <i class="el-icon-arrow-down" v-else></i>
                    {{editFlag ? '收起' : '展开编辑'}}</el-button>
                <el-button style="width:calc(70% - 15px)" v-if="formattingType === 'JSON'" size="mini" @click="data = JSON.stringify(formattingData,null,'\t')">将JSON内容移动到内容编辑</el-button>
            </div>
            <!-- 格式化数据展示区 -->
            <Divider orientation="left">格式化内容（Formatted content）</Divider>
            <div style="text-align:left;margin-top:10px">
                <span>Pretty:&nbsp;
                    <Select v-model="formattingType" size="small" style="width:120px" :value="formattingType" @on-change="dataChangeView">
                        <Option value="Text">Text</Option>
                        <Option value="JSON">JSON</Option>
                        <Option value="HTML">HTML</Option>
                        <Option value="XML">XML</Option>
                    </Select>
                </span>
                <el-button style="padding: 5px 15px;" size="mini" @click="dataChangeView">刷新</el-button>
                <el-button style="padding: 5px 15px;" size="mini" @click="close" v-show="!isMenuControl">关闭</el-button>
            </div>
            <div style="padding:10px;overflow-x:auto;margin-top:10px;text-align:left">
                <JsonViewer :value="formattingData" style="text-align:left" v-if="formattingType === 'JSON'"></JsonViewer>
                <div v-html="formattingData" v-else-if="formattingType === 'HTML'"></div>
                <div v-html="formattingData" v-else-if="formattingType === 'XML'"></div>
                <div v-else>{{formattingData}}</div>
            </div>
            </div>
            <el-backtop target="#lse_data_view .el-scrollbar__wrap"></el-backtop>
        </el-scrollbar>
        </Col>
      </Row>
    </div>
</transition>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import XMLFORMAT from '../../util/xmlformat'
export default {
  name: 'dataView',
  data () {
    return {
      flag: this.showFlag,
      editFlag: false,
      data: '',
      formattingData: '',
      formattingType: 'Text'
    }
  },
  props: {
    showFlag: {
      type: Boolean,
      default: false
    },
    isMenuControl: {
      type: Boolean,
      default: false
    }
  },
  components: {
    JsonViewer
  },
  methods: {
    close () {
      this.flag = false
    },
    dataChangeView () {
      switch (this.formattingType) {
        case 'JSON':
          try {
            this.formattingData = JSON.parse(this.data)
          } catch (error) {
            this.formattingData = this.data
          }
          break
        case 'HTML':
          let htmlData = XMLFORMAT.parsexml(this.data, 'text/html')
          if (htmlData !== false) {
            this.formattingData = htmlData
          } else {
            this.formattingData = this.data
          }
          break
        case 'XML':
          let xmlData = XMLFORMAT.parsexml(this.data, 'text/xml')
          if (xmlData !== false) {
            this.formattingData = xmlData
          } else {
            this.formattingData = this.data
          }
          break
        default:
          this.formattingData = this.data
          break
      }
    }
  },
  created () {
    this.dataChangeView()
  }
}
</script>

<style scoped>
.lse_data_view{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999999;
}
>>>.el-scrollbar__wrap{
  overflow-x: hidden;
}
/* 格式化样式 */
>>>.code-string{
  color: #993300;
}
>>>.code-number{
  color: #cc00cc;
}
>>>.code-boolean{
  color: #000033;
}
>>>.code-numm{
  color: magenta;
}
>>>.code-key{
  color: #003377;
  font-weight: bold;
}
</style>
